<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Overlock' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="css/gfont-guide.css" media="all" />
</head>
<body>

<h2>Guide to Google Web Fonts</h2>
<h4><span>1</span>First, you would want to look at the fonts at <a href="http://www.google.com/webfonts#ChoosePlace:select" target="_blank">http://www.google.com/webfonts</a>.</h4>
<h4><span>2</span>See something that you really like? Copy that specific font name that you desire.</h4>
<img src="./images/gfonts/select_font.png" />
<h4><span>3</span>Go back to your website's back-end. Quickly click on the icon <img class="icon" src="./images/normal-check.jpg" />. A popup dialog will come up and it's time to paste your favorite font name here.</h4>
<img src="./images/gfonts/paste_font.png" />
<h4><span>4</span>Select the suitable variant and subset for your font</h4>
<img src="./images/gfonts/select_variant_subset.png" />
<h4><span>5</span>Prefer to custom CSS? Check the Custom CSS box and work on it.</h4>
<img src="./images/gfonts/font_custom_style.png" />
<h4><span>6</span> Hit the apply button then save. You're good to go.</h4>
<img src="./images/gfonts/gfont_result.png" />

</body>
</html>